<template>
	<view> <progress :percent="percent" strock-width="10"></progress>
		<view v-bind:class="{leftwhite:isActivity,heightAdd:isActivity1}" class="upload-main">
			<image @click="choosephoto" :src="uploadPhoto"  mode="widthFix" class="upload-img">
				
			</image>
			<view class="upload-title">
				<input class="title_main" v-model="title" type="text" style="line-height: 200upx;" value=""placeholder="请输入标题" />
			</view>
			<view class="upload-context">
				<input type="text" v-model="context" value=""placeholder="请输入一句话" />
			</view>
			<text @click="type" class="leixing">{{type1}}</text>
			<text  class="author">◯ {{author}}</text>
			
			<view class="bgctext" :style="{width:width1}">
				<input  type="text" v-model="jiqiname"  v-on:input="changeinput" value=""placeholder="所用设备" />
			</view>
		</view>
		<view @click="submitted" class="submit">
			<text>提交</text>
		</view>
		 <w-compress ref='wCompress' />
	</view>
</template>

<script>
var _self;

import WCompress from '../../w-compress/w-compress.vue'
import http from '../../utils/http.js';
	export default {
		 components: {
		         WCompress
		     },
		data() {
			return {
				jiqiname:"",
					width1:"30",
					type1:"手摄卡片",
					author:"",
					 percent:0,
					 uploadPhoto:"../../static/14-14.jpg",
					 isActivity:false,
					 title:"",
					 context:"",
					 isActivity1:false
			}
		},
		onLoad (){
			_self = this;
		},
		onPullDownRefresh() {
		        //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		        console.log('refresh');
		        setTimeout(function () {
		            uni.stopPullDownRefresh();  //停止下拉刷新动画
		        }, 1000);
		    },
		onShow:function(){
			this.author = uni.getStorageSync("name");
			if(this.author.length==0){
				console.log(true)
			}else{
				console.log(false)
			}
			
		},
		mounted:function(){
				
		},
		computed: {
		        
		         
		       },
		methods: {
			changeinput:function(){
				//console.log(this.jiqiname.length);
				var re = /[\u4E00-\u9FA5]/g;
				var china = this.jiqiname;
				var len = 0;
				for (var i=0; i<china.length; i++) {   
				     var c = china.charCodeAt(i);   
				    //单字节加1   
				     if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {   
				       len++;   
				     }   
				     else {   
				      len+=2;   
				     }   
				    }   
				
				
				var a = len*10;
				this.width1 = a+'px';		 
				console.log(this.width1);
			},
			type:function(){
				if(this.type1=="手摄卡片"){
					this.type1="相摄卡片"
			}else if(this.type1=="相摄卡片"){
					this.type1="手摄卡片"
			}
		},
		choosephoto:function(){
			var that = this;
			                uni.chooseImage({
			                    count: 1,
			                    sizeType:['copressed'],
			                    success(res) {
									uni.showLoading({ title: '图片压缩中...', mask: true })
			                        //因为有一张图片， 输出下标[0]， 直接输出地址
									that.$refs.wCompress.start(res.tempFilePaths[0], {
									            pixels: 3000000,  // 最大分辨率，默认二百万
									            quality: 0.4,     // 压缩质量，默认0.8
									            type: 'jpg',      // 图片类型，默认jpg
									            base64: false,     // 是否返回base64，默认false，非H5有效
									          }).then(res=>{
												   uni.hideLoading()
													var imgFiles = res
													console.log(imgFiles)
													  // 上传图片
														// 做成一个上传对象
														that.uploadPhoto = imgFiles;
													   uni.getImageInfo({
														 src: that.uploadPhoto,
														 success (res) {
														   console.log(res.width)
														   console.log(res.height)
														   if(res.width>res.height){
															   that.isActivity = true
														   }else{
															   that.isActivity = false
														   }
														   if(res.width*13<res.height*9){
															   that.isActivity1 = true
														   }else{
															   that.isActivity1 = false
														   }
														 }
													   })	
											  })
			                       
			                      
			                       
			                    }
			                })
		},
		submitted:function(){
			var that = this;
			if(that.jiqiname=="" || that.title=="" || that.author.length==0 || that.context=="" || that.uploadPhoto=="../../static/upload.jpg"){
				if(that.author.length==0){
					uni.showToast({
						title:"请先登录",
						duration:1500,
						icon:"none"
					})
					uni.navigateTo({
						url:"./mypage"
					})
				}else{
					
				uni.showToast({
					title:"请完善投稿信息",
					duration:1500,
					icon:"none"
				})
				}
			}else{
				var that = this;
			//提交图片
			//压缩图片
			uni.compressImage({
				src:that.uploadPhoto,
				
			})
			var uper = uni.uploadFile({
			    // 需要上传的地址
				
			    url:'https://www.camwork.site/uploadHandler.ashx',
			    // filePath  需要上传的文件
			    filePath: this.uploadPhoto,
			    name: 'upload_file',
			    success(res1) {
			        // 显示上传信息
			        console.log(res1)
					if(res1.data!="No"){
						that.imageurl = res1.data;
						console.log(that.imageurl);
						that.uploadPhoto ="https://www.camwork.site/rescourse/photo/"+that.imageurl;		
						//提交文字
						//获取时间
						var date = new Date(),
						year = date.getFullYear(),
						month = date.getMonth() + 1,
						day = date.getDate(),
						hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
						minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
						second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
						
						http.addImage({
							userid:uni.getStorageSync("openid"),
							title:that.title,
							context: that.context,
							logourl:uni.getStorageSync("logourl"),
							imageurl:that.uploadPhoto,
							year:year,
							month:month,
							day:day+" ",
							hour:hour,
							min:minute,
							second:second,
							type:that.type1,
							equipment:that.jiqiname,
							name:that.author
						}).then(list=>{
							console.log(list);
							uni.showToast({
								title:"上传成功",
								duration:2000
							})
							that.uploadPhoto = "../../static/upload.jpg";
							that.title = "";
							that.context = "";
							that.jiqiname = "";
							that.isActivity = false;
							that.isActivity1 = false;
							var yifabu = uni.getStorageSync("yifabu");
							yifabu = parseInt(yifabu)+1;
							uni.setStorageSync("yifabu",yifabu);
						})
					}
			    }
				
			});
			// onProgressUpdate 上传对象更新的方法
			uper.onProgressUpdate(function(res){
			    // 进度条等于 上传到的进度
			    _self.percent = res.progress
			    console.log('上传进度' + res.progress)
			    console.log('已经上传的数据长度' + res.totalBytesSent)
			    console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend)
			})
			
			}
			
			
		}
	}
	} 
</script>

<style>
.upload-main{
	width: 92%;
	height: 1324upx;
	margin: 50upx auto;
	margin-top: 70upx;
	position: relative;
	-moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
	-webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
	            
	box-shadow:4px 4px 12px 
	            -2px
	             rgba(20%,20%,40%,0.5);
}
.upload-img{
	width: 100%	;
	height: 700upx;
}
.leftwhite{
	padding-top: 100upx;
}
.heightAdd{
	height: 1800upx;
}
.upload-title{
	padding-bottom: 20upx;
	margin-top: 40upx;
	margin-bottom: 20upx;
	margin-left: 30upx;
	font-size: 55upx;
	font-weight: 700;
	
}
.title_main{
	display: block;
	height: 100upx;
}
.upload-context{
	
	margin-top: 35upx;
	margin-left: 30upx;
	font-size: 40upx;
	font-weight: 550upx;
}
.leixing{
	position: absolute;
	bottom: 30upx;
	left: 20upx;
	font-size: 30upx;
	display: inline-block;
	padding: 8upx 10upx 8upx 10upx; 
	line-height: 45upx;
	border: 1px solid #2D2D2D;
}	
.author{
	position: absolute;
	bottom: 40upx;
	left: 190upx;
	font-size: 30upx;
	line-height: 45upx;
}
.jiqi{
	position: absolute;
	bottom: 40upx;
	right: 50upx;
	font-size: 30upx;
	line-height: 45upx;
	color:#FFFFFF;
	text-align: right;
}
.bgctext{
	width: 80px;
	height: 55upx;
	background-color: #2D2D2D;
	position: absolute;
	bottom: 38upx;
	right: 45upx;
	color:#FFFFFF;
	font-size: 30upx;
	padding-left: 5upx;
	padding-right: 5upx;
	text-align: center;
}
.submit{
	width: 92%;
	height: 70upx;
	margin: 0 auto;
	line-height: 70upx;
	text-align: center;
	background-color: #2D2D2D;
	color: #fff;
	font-size: 30upx;
	margin-bottom: 60upx;
	margin-top: 30upx;
	border: 1px solid #2D2D2D;
}
</style>
